<template>
  <div>
    <!-- 经度输入 -->
    <div>
      <label for="longitude">经度:</label>
      <input
          id="longitude"
          v-model="longitudeInput"
          @input="handleInput('longitude')"
          placeholder="请输入经度（度分秒或小数点格式）"
      />
      <span v-if="longitudeDisplay">{{ longitudeDisplay }}</span>
    </div>
    <!-- 纬度输入 -->
    <div>
      <label for="latitude">纬度:</label>
      <input
          id="latitude"
          v-model="latitudeInput"
          @input="handleInput('latitude')"
          placeholder="请输入纬度（度分秒或小数点格式）"
      />
      <span v-if="latitudeDisplay">{{ latitudeDisplay }}</span>
    </div>
    <!-- 确认按钮 -->
    <el-button @click="confirmInput">确认</el-button>
    <el-button @click="cancelInput">取消</el-button>
  </div>
</template>

<script>
export default {
  name: "EditPosition",
  data() {
    return {
      longitudeInput: '',
      latitudeInput: '',
      longitudeDisplay: '',
      latitudeDisplay: '',
    };
  },
  methods: {
    // 处理输入事件
    handleInput(type) {
      const inputValue = type === 'longitude' ? this.longitudeInput : this.latitudeInput;
      let result;
      if (this.isDecimalFormat(inputValue)) {
        result = this.decimalToDMS(inputValue);
      } else if (this.isDMSFormat(inputValue)) {
        result = this.DMSToDecimal(inputValue);
      } else {
        result = '输入格式不正确';
      }
      if (type === 'longitude') {
        this.longitudeDisplay = result;
      } else {
        this.latitudeDisplay = result;
      }
    },
    // 判断是否为小数点格式
    isDecimalFormat(value) {
      return /^-?\d+(\.\d+)?$/.test(value);
    },
    // 判断是否为度分秒格式
    isDMSFormat(value) {
      return /^-?\d+°\d+'\d+(\.\d+)?''$/.test(value);
    },
    // 小数点格式转换为度分秒格式
    decimalToDMS(decimal) {
      const num = parseFloat(decimal);
      const degrees = Math.trunc(num);
      const minutesDecimal = Math.abs((num - degrees) * 60);
      const minutes = Math.trunc(minutesDecimal);
      const seconds = (minutesDecimal - minutes) * 60;
      return `${degrees}°${minutes}'${seconds.toFixed(2)}''`;
    },
    // 度分秒格式转换为小数点格式
    DMSToDecimal(dms) {
      const match = dms.match(/(-?\d+)°(\d+)'(\d+(\.\d+)?)''/);
      if (match) {
        const degrees = parseInt(match[1], 10);
        const minutes = parseInt(match[2], 10);
        const seconds = parseFloat(match[3]);
        return (degrees + (minutes / 60) + (seconds / 3600)).toFixed(6);
      }
      return null;
    },
    // 确认输入
    confirmInput() {
      let data =[
          parseFloat(this.isDecimalFormat(this.longitudeDisplay)?this.longitudeDisplay:this.longitudeInput),
          parseFloat(this.isDecimalFormat(this.latitudeDisplay)?this.latitudeDisplay:this.latitudeInput)];
      this.$emit("save",data)
    },
    // 取消输入
    cancelInput(){
      this.$emit("cancel")
    }
  },
  emits:[
      "save",
      "cancel"
  ],
  props:[
      "editPosition"
  ],
  created(){
    if(this.editPosition){
      this.longitudeInput = this.editPosition[0]
      this.latitudeInput = this.editPosition[1]
    }
  }
};
</script>

<style scoped>
div {
  margin-bottom: 10px;
}
label {
  display: inline-block;
  width: 80px;
}
input {
  width: 200px;
}
</style>